<template>
    <div class="tabs-box">
        <div class="tabs-menu">
            <el-tabs
                v-model="tabsMenuValue"
                type="card"
                @tab-click="tabClick"
                @tab-remove="tabRemove"
            >
                <el-tab-pane
                    v-for="item in tabsMenuList"
                    :key="item.path"
                    :label="item.title"
                    :name="item.path"
                    :closable="item.close"
                >
                    <template #label>
                        <el-icon v-if="item.icon && tabsIcon" class="tabs-icon">
                            <component :is="item.icon"></component>
                        </el-icon>
                        {{ item.title }}
                    </template>
                </el-tab-pane>
            </el-tabs>
            <MoreButton />
        </div>
    </div>
</template>

<script setup>
import Sortable from "sortablejs"
import { ref, computed, watch, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useGlobalStore } from "@/store/modules/global"
import { useTabsStore } from "@/store/modules/tabs"
import { useAuthStore } from "@/store/modules/auth"
import MoreButton from "./components/MoreButton.vue"

const route = useRoute()
const router = useRouter()
const tabStore = useTabsStore()
const authStore = useAuthStore()
const globalStore = useGlobalStore()

const tabsMenuValue = ref(route.fullPath)
const tabsMenuList = computed(() => tabStore.tabsMenuList)
const tabsIcon = computed(() => globalStore.tabsIcon)

onMounted(() => {
    tabsDrop()
    initTabs()
})

// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
watch(
    () => route.fullPath,
    () => {
        if (route.meta.isFull) return
        tabsMenuValue.value = route.fullPath
        const tabsParams = {
            icon: route.meta.icon,
            title: route.meta.title,
            path: route.fullPath,
            name: route.name,
            close: !route.meta.isAffix,
            isKeepAlive: route.meta.isKeepAlive
        }
        tabStore.addTabs(tabsParams)
    },
    { immediate: true }
)

// 初始化需要固定的 tabs
const initTabs = () => {
    authStore.flatMenuListGet.forEach(item => {
        if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
            const tabsParams = {
                icon: item.meta.icon,
                title: item.meta.title,
                path: item.path,
                name: item.name,
                close: !item.meta.isAffix,
                isKeepAlive: item.meta.isKeepAlive
            }
            tabStore.addTabs(tabsParams)
        }
    })
}

// tabs 拖拽排序
const tabsDrop = () => {
    Sortable.create(document.querySelector(".el-tabs__nav"), {
        draggable: ".el-tabs__item",
        animation: 300,
        onEnd ({ newIndex, oldIndex }) {
            const tabsList = [...tabStore.tabsMenuList]
            const currRow = tabsList.splice(oldIndex, 1)[0]
            tabsList.splice(newIndex, 0, currRow)
            tabStore.setTabs(tabsList)
        }
    })
}

// Tab Click
const tabClick = (tabItem) => {
    const fullPath = tabItem.props.name
    router.push(fullPath)
}

// Remove Tab
const tabRemove = (fullPath) => {
    tabStore.removeTabs(fullPath, fullPath == route.fullPath)
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
